<template>
  <div class="commonTravelRecord">
    <div class="c-t-r-top">
      <div class="t-left">{{ commonTitle }}</div>
      <div class="t-line"></div>
    </div>
    <div class="c-t-r-bottom">
      <div v-for="(item, index) in recordList" :key="index" class="b-m-image">
        <div class="b-i-top">
          <img src="@/assets/images/investigateBusiness/screen-icon.png" class="b-i-top-img" />
          <div class="b-i-top-address">{{ item.name }}</div>
        </div>
        <img :src="item.url" class="b-i-middle" />
        <div class="b-i-bottom">
          {{ item.time }}
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "commonArchiveImage",
  props: {
    commonTitle: {
      type: String,
      default: "搜索人出行记录"
    },
    recordList: {
      type: Array,
      default: () => []
    }
  },
  components: {},
  computed: {},
  created() {},
  mounted() {},
  watch: {},
  data() {
    return {}
  },
  methods: {}
}
</script>

<style scoped lang="scss">
.commonTravelRecord {
  .c-t-r-top {
    height: 40px;
    display: flex;
    align-items: center;
    .t-left {
      width: 189px;
      height: 40px;
      line-height: 40px;
      text-align: center;
      background-image: url("@/assets/images/investigateBusiness/analysis-rectangle.png");
      background-size: 100% 100%;
      background-repeat: no-repeat;
      font-family: "Microsoft YaHei";
      font-size: 16px;
      font-weight: bold;
      font-variation-settings: "opsz" auto;
      color: rgba(255, 255, 255, 0.9);
    }
    .t-line {
      width: 64px;
      height: 1px;
      background: #0e9cff;
    }
  }
  .c-t-r-bottom {
    // margin-top: 20px;
    width: 100%;
    overflow: hidden;
    display: flex;
    flex-wrap: wrap;
    .b-m-image {
      margin-top: 20px;
      margin-right: 16.5px;
      width: 138px;
      height: 138px;
      background: #2e5eab;
      box-shadow: inset 0px 1px 15px 0px rgba(3, 251, 255, 0.6);
      border-radius: 8px;
      .b-i-top {
        width: 100%;
        height: 20px;
        display: flex;
        align-items: center;
        &-img {
          height: 8px;
          width: 8px;
          margin-left: 10px;
        }
        &-address {
          width: 100%;
          margin: 0 10px;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
      }
      .b-i-middle {
        width: 138px;
        height: 100px;
      }
      .b-i-bottom {
        width: 100%;
        height: 16px;
        margin: -2px 10px 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      &:last-child {
        margin-right: 0px;
      }
    }
  }
}
::v-deep {
}
</style>
